<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<script src="node_modules/vue/dist/vue.js"></script>
<body>
<!--v-on：为元素绑定事件-->
<div id="app" >
<input type="button" value="执行doIt" v-on:click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<input type="button" value="失去焦点事件" @blur="doIt">
    <button type="button" @click="doit2">v-on简写</button>
    <ul v-text="food"></ul>
    <input type="button" value="change" @click="changefood">
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            food:"西兰花"
        },
        //为挂载元素设置方法
        methods:{
            doIt:function () {
               alert("做it")
            },
            doit2:function () {
            location.href="http://www.baidu.com"
            },
            changefood:function () {
             //   this.可以拿到定义在data中的数据
             this.food="不爱西兰花";

            }
        }
    })
</script>
</body>
</html>